<template>
  <div>
      <h1>详情页</h1>
      <detail-fu></detail-fu>
  <div class="goods-sku">
      <dl v-for="(item,index) in specs" :key="index">
        <dt>{{item.name}}</dt>
        <dd>
          <template v-for="(items,index) in item.values" :key="index">
              <img :class="{selected:items.selected,disabled:items.disabled}" @click="selItem(item,items)" v-if="items.picture" :src="items.picture" :alt="items.name">
              <span :class="{selected:items.selected,disabled:items.disabled}" @click="selItem(item,items)"   v-if="!items.picture" >{{items.name}}</span>
          </template>
        </dd>
      </dl>
  </div>
    <h1>antd-vue的使用</h1>
    <a-button type="primary">Primary Button</a-button>
    <course-com></course-com>
    <antd-form></antd-form>
    <antd-table></antd-table>
  </div>
</template>
<script>
import { getDetail } from '../../api/details'
import getPowerSet from '../../utils/pow-set'
import DetailFu from './DetailFu.vue'
import CourseCom from './Course.vue'
import antdForm from './andtForm.vue'
import antdTable from './antdTable.vue'
export default {
  components: {
    DetailFu,
    CourseCom,
    antdForm,
    antdTable
  },
  name: 'detail',
  data () {
    return {
      specs: [], // 规格数据
      skus: [], // 所有可以出现的组合
      pathMap: {

      }, // 所有规格和id的组合
      skuId: '' // 当前的skuid
    }
  },
  beforeMount () {
    // 获取详情页数据
    getDetail().then(res => {
      this.specs = res.result.specs // 规格数据
      this.skus = res.result.skus // 组合数据
      console.log(this.specs)
      console.log(this.skus)
      this.getPathMap()
    })
  },
  methods: {
    // 获取当前选中的数组
    getSel () {
      const arr = []
      console.log(this.specs)
      this.specs.forEach(spec => {
        const obj = spec.values.find(val => val.selected) // 查找数组中有selected为真的数据
        arr.push(obj ? obj.name : undefined)
      })
      console.log(arr)
      return arr
    },
    // 过滤出所有可能组合的字典表["黑色"]和id
    getPathMap () {
      this.skus.forEach(sku => {
        // console.log(sku)
        // 使用幂集算法结果
        if (sku.inventory) { // 假如有库存去处理数据到字典表中
          // 2. 得到sku属性值数组
          const specs = sku.specs.map(spec => spec.valueName)
          // console.log(specs)// ['男', '绿色']
          // 3. 得到sku属性值数组的子集
          const powerSet = getPowerSet(specs)
          // console.log(powerSet) [[""],["男"],["绿色"],["男","绿色"]]
          powerSet.forEach(set => {
            console.log(set) // 黑色
            const key = set.join('*')
            if (!this.pathMap[key]) {
              this.pathMap[key] = []
            }
            this.pathMap[key].push(sku.id)
          })
        }
      })
      console.log(this.pathMap) // 字典表
    },
    // 设置数据中的 不符合字典表中出现的内容 增加字段disabled:true
    updateDisabledStatus () {
      this.specs.forEach((spec, index) => {
        var curr = this.getSel()// 获取到当前选中的数据 //["黑色"]
        spec.values.forEach(val => {
          // val---每一个数据
          if (val.selected) return // 已选择 不考虑禁用
          console.log(val.name)
          curr[index] = val.name // ["黑色","23"] ["黑色","34"] ["黑色","36"]
          // 过滤无效值，并最终得到key
          const key = curr.filter(v => v).join('*') // 把当前出现的所有可能和字典对比
          console.log(key) // 黑色*23
          // 当前数据disabled和字典表中取反
          val.disabled = !this.pathMap[key]
        })
      })
    },
    // 点击事件切换
    selItem (item, items) {
      // item 所有的规格数据
      // items 当前点击的规格数据
      // 点击当前如果数据是被选选中的
      if (items.selected) { // 如果当前点击的规格数据 是真 变为假
        items.selected = false
      } else { // 如果当前点击的规格数据 是假
        item.values.forEach(val => { // 先把所有的规格都设置未步不选中
          val.selected = false
        })
        items.selected = true // 只把当前点击的设置未选中
        // 根据当前选择的内容 去pathMap中找到对应id
        const curr = this.getSel()// ["黑色"]
        const key = curr.join('*')
        console.log('------', key)
        const id = this.pathMap[key]
        console.log('**********', id)
        if (id) {
          this.skuId = id // 加入到购物车使用的id
        }
      }
      console.log(item)
      this.updateDisabledStatus()
    }
  }
}
</script>
<style lang="less">
/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
